<template>
  <Page auto-content-height>
    <FosoCard :title="$t('sys.profile.title')" class="!px-0 !pt-0">
      <FosoTabs v-model="activeName" :tabs-list="tabList">
        <!-- 基本信息 -->
        <template #updateUserInfo>
          <BaseForm>
            <template #avatar> <AvatarUpload /> </template>
            <template #submitbutton>
              <el-button type="primary" @click="submit()"> 提交 </el-button>
            </template>
          </BaseForm>
        </template>
        <!-- 修改密码 -->
        <template #updatePassword>
          <PasswordForm>
            <template #submitbutton>
              <el-button type="primary" @click="submit()"> 提交 </el-button>
            </template>
          </PasswordForm>
        </template>
      </FosoTabs>
    </FosoCard>
  </Page>
</template>

<script setup lang="ts">
import type { ChangePasswordReq, UserProfile } from '#/api/sys/model/userModel';

import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { useUserStore } from '@vben/stores';

import { useVbenForm } from '#/adapter/form';
import { changePassword, updateProfile } from '#/api/sys/user';
import AvatarUpload from '#/views/sys/user/components/AvatarUpload.vue';

const userStore = useUserStore();
const activeName = ref('updateUserInfo');
// 定义表单
const [BaseForm, BaseFormApi] = useVbenForm({
  actionWrapperClass: 'flex', // 调整表单按钮位置
  showDefaultActions: false, // 不显示操作按钮
  schema: [
    {
      component: 'avatar',
      fieldName: 'avatar',
      label: $t('sys.profile.avatar'),
    },
    {
      component: 'Input',
      componentProps: {
        clearable: true,
      },
      formItemClass: 'w-[500px]',
      fieldName: 'nickname',
      label: $t('sys.profile.nickname'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'mobile',
      formItemClass: 'w-[500px]',
      label: $t('sys.profile.mobile'),
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'email',
      formItemClass: 'w-[500px]',
      label: $t('sys.profile.email'),
    },
    {
      component: 'xxx',
      fieldName: 'submitbutton',
      label: '',
      formItemClass: 'w-[500px]',
    },
  ],
});
const [PasswordForm, PasswordFormApi] = useVbenForm({
  actionWrapperClass: 'flex', // 调整表单按钮位置
  showDefaultActions: false, // 不显示操作按钮
  schema: [
    {
      component: 'Input',
      fieldName: 'oldPassword',
      formItemClass: 'w-[500px]',
      label: $t('sys.profile.oldPassword'),
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        clearable: true,
      },
      formItemClass: 'w-[500px]',
      fieldName: 'newPassword',
      label: $t('sys.profile.newPassword'),
      rules: 'required',
    },
    {
      component: 'xxx',
      fieldName: 'submitbutton',
      label: '',
      formItemClass: 'w-[500px]',
    },
  ],
});

// 定义标签页
const tabList = [
  {
    label: $t('sys.profile.basicUserInfo'),
    name: 'updateUserInfo',
  },
  {
    label: $t('sys.profile.updatePassword'),
    name: 'updatePassword',
  },
];

/** 修改提交*/
const submit = async () => {
  try {
    // 更新用户信息
    if (activeName.value === 'updateUserInfo') {
      const formData = await BaseFormApi?.validateAndSubmitForm();
      if (!formData) return;
      await updateProfile(formData as UserProfile);
    }
    // 更新密码
    else if (activeName.value === 'updatePassword') {
      const formData = await PasswordFormApi?.validateAndSubmitForm();
      if (!formData) return;
      await changePassword(formData as ChangePasswordReq);
    }
    ElMessage.success($t('common.operateSuccess'));
  } catch {}
};
onMounted(() => {
  // 回显操作
  BaseFormApi?.setValues({
    ...userStore.userInfo,
  });
});
</script>

<style scoped></style>
